<template>
  <div>
    <van-swipe :autoplay="2000" >
      <van-swipe-item class="imgs"  v-for="(item,index) in imgs" :key="index"><img :src="item" class="img"></van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">

defineProps({
  imgs:{
    type:Array,
    required:true
  }
})

</script>

<style scoped>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .imgs{
    width: 100%;
    height: 140px;
    img{
      width: 100%;
      justify-self: auto;
      /* //图片自适应 */
      object-fit: cover;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      margin: 0 auto;
      display: block;
      justify-content: center;
      align-items: center;
      justify-items: center;
      justify-self: center;
      align-self: center;
      overflow: hidden;
    }
  }
</style>